<template>
  <view class="template-product tn-safe-area-inset-bottom">
    <view class="tn-margin-bottom" v-if="videoSrc" >
     <video :src="videoSrc" style="width: 100%;height: 300px;" id="videoPlayer"></video>
    </view>
    <view class="tn-flex tn-padding tn-flex-col-center">
      <view class="tn-cool-bg-color-2 tn-margin-right tn-padding-xs tn-color-white tn-round tn-shadow-blur" v-for="(video,index) in chapter.bannerfile" @click="openVideo(video.url)">
        <text class="tn-padding-left-xs">视频精讲{{index+1}}</text>      
      </view>
    </view>
    
    <view class="tn-padding-bottom-xl">
      <view class="">
		  <view class="tn-margin">
		    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding website-shadow">
		      <view class="justify-content-item">
		        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
		            <view class="tn-cool-bg-color-1 sort-left">1</view>
		          <view class="tn-padding-right tn-color-black">
		            <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
		              动漫趣学
		            </view>
		            <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-color-grey">
		              有趣视频动画，提升学习乐趣
		            </view>
		          </view>
		        </view>
		      </view>
		      <view class="justify-content-item tn-flex-row-center">
		        <view class="tn-cool-bg-color-15 tn-padding-xs tn-color-white tn-round tn-shadow-blur" @click="tn('/pages/cartoon/cartoon?id='+chapter._id)">
		          <text class="tn-padding-left-xs">去学习</text>
		        </view>
		      </view>
		    </view>
		  </view>
		  <view class="tn-margin" >
		    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding website-shadow">
		      <view class="justify-content-item">
		        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
		            <view class="tn-cool-bg-color-2 sort-left">2</view>
		          <view class="tn-padding-right tn-color-black">
		            <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
		              专项集训
		            </view>
		            <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-color-grey">
		              逐项针对训练，科学记单词
		            </view>
		          </view>
		        </view>
		      </view>
		      <view class="justify-content-item tn-flex-row-center">
		        <view class="tn-cool-bg-color-15 tn-padding-xs tn-color-white tn-round tn-shadow-blur" @click="tn('/pages/word/index?id='+chapter._id)">
		          <text class="tn-padding-left-xs">去学习</text>
		        </view>
		      </view>
		    </view>
		  </view>
		  <view class="tn-margin" >
		    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding website-shadow"  @click="tn('/pages/sentence/sentence?id='+chapter._id)">
		      <view class="justify-content-item">
		        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
		         <view class="tn-cool-bg-color-3 sort-left">3</view>
		          <view class="tn-padding-right tn-color-black">
		            <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
		              逐句精听
		            </view>
		            <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-color-grey">
		              快速记忆，轻松记单词
		            </view>
		          </view>
		        </view>
		      </view>
		      <view class="justify-content-item tn-flex-row-center">
		        <view class="tn-cool-bg-color-15 tn-padding-xs tn-color-white tn-round tn-shadow-blur">
		          <text class="tn-padding-left-xs">去学习</text>
		        </view>
		      </view>
		    </view>
		  </view>
		  <view class="tn-margin" >
		    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding website-shadow" @click="tn('/pages/word/test?id='+chapter._id+'&type=9')">
		      <view class="justify-content-item">
		        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
		         <view class="tn-cool-bg-color-4 sort-left">4</view>
		          <view class="tn-padding-right tn-color-black">
		            <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
		              真题巩固
		            </view>
		            <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-color-grey">
		              强化练习，持续掌握记心里
		            </view>
		          </view>
		        </view>
		      </view>
		      <view class="justify-content-item tn-flex-row-center">
		        <view class="tn-cool-bg-color-15 tn-padding-xs tn-color-white tn-round tn-shadow-blur" >
		          <text class="tn-padding-left-xs">去练习</text>
		        </view>
		      </view>
		    </view>
		  </view>
        <view class="tn-margin" v-for="(item,index) in chapter.moreContent" :key="index">
          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding website-shadow">
            <view class="justify-content-item">
              <view class="tn-flex tn-flex-col-center tn-flex-row-left">
               <view :class="[`tn-cool-bg-color-${index+5} sort-left`] ">{{index+5}}</view>
                <view class="tn-padding-right tn-color-black">
                  <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
                    {{item.name}}
                  </view>
                  <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-color-grey">
                    多练多强化，记单词很轻松
                  </view>
                </view>
              </view>
            </view>
            <view class="justify-content-item tn-flex-row-center">
              <view class="tn-cool-bg-color-15 tn-padding-xs tn-color-white tn-round tn-shadow-blur" @click="openSelector(item.file)">
                <text class="tn-padding-left-xs">去学习</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>  
    <tn-picker mode="selector" v-model="showSelector" :defaultSelector="[0]" :range="selector" @confirm="confirmPicker"></tn-picker>

  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  const pageDataCenter=uniCloud.importObject('page-data-center')
  export default {
    name: 'TemplateProduct',
    mixins: [template_page_mixin],
    data(){
      return {
        videoSrc: '',
		chapter:{
			bannerfile:null
		},
		showSelector:false,
		selector: [1, 2, 3],
		selectorFile:[],
        banner: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
        current: 0,
		videoContext:null,
		timer:null
      }
    },
	onLoad(option) {
		this.getData(option.id)
	  //'videoPlayer' 是video标签里配置的id
		this.videoContext = uni.createVideoContext('videoPlayer', this);
		
		//防录屏/截屏
		let platform = uni.getSystemInfoSync().platform;
			console.log(platform,'设备标识')
			//安卓手机
		if (platform === "android") {
			console.log(platform,'设备标识111---')
			if (wx.setVisualEffectOnCapture) {
					wx.setVisualEffectOnCapture({
					visualEffect: 'hidden',
					success: (res)=>{
						console.log('success录屏',res);
						}
				})
			}
			} else {	
				//苹果手机
				this.timer = setInterval(()=>{
					wx.getScreenRecordingState({
						success: (res)=>{
							console.log('success录屏22',res);
							if(res.state=='on'){
								this.videoContext.pause() //暂停视频播放
								uni.showModal({
									content:'此页面不允许录屏',
									showCancel:false,
									success: (res) => {
										if(res.confirm){
											uni.navigateBack()
										}
									}
								})
							}
						}
					})
				},2000)					
			}		
	},
	onUnload(){	
		if (wx.setVisualEffectOnCapture) {
				wx.setVisualEffectOnCapture({
				visualEffect: 'none',
				success: (res)=>{
					console.log('success',res);
				}
			})
		}
		if(this.timer) {  
				clearTimeout(this.timer);  
				this.timer = null;  
			}  
		
	},
    methods: {
		getData(id){
			pageDataCenter.getChapterDetail(id).then((res)=>{
				console.log(res)
				this.chapter=res.data[0]
				this.openVideo(this.chapter.bannerfile[0]['url'])
			})
		},
		openVideo(src){
			this.videoSrc=src
		},
		openSelector(file){
			this.selectorFile=file
			if(file.length >1){
				this.selector=file.map((item)=>item.name)
				this.showSelector=true
			}else{
				file[0]['extname']=='mp4' && this.openVideo(file[0])
				file[0]['extname']=='pdf' && this.open(file[0])
			}
		},
		confirmPicker(e){
			let file=this.selectorFile[e]
			this.open(file)
		},
      // cardSwiper
      open(e) {
        e.extname== 'pdf' && uni.downloadFile({
          url: e.path,
          success: function (res) {
            var filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              success: function (res) {
                console.log('打开文档成功');
              }
            });
          }
        });
		e.extname=='mp4' && this.openVideo(e.path)
      },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      // tab选项卡切换
      tabChange(index) {
        this.current = index
      },
      getRandomCoolBg() {
        return this.$t.colorUtils.getRandomCoolBgClass()
      },
	  goBack(){
		  uni.navigateBack()
	  }
    }
  }
</script>

<style lang="scss" scoped>
	@import '../course/course.scss';
	.sort-left{
		width: 40px;
		height: 40px;
		text-align: center;
		border-radius: 50%;
		line-height: 40px;
		color: #fff;
		font-size: 24px;
		font-weight: 700;
	}
</style>
